<template>
  <section>
    <p v-bind:style="{color: activeColor, fontSize: fontSize +'px'}">内联样式</p>
    <p v-bind:style="styleObject">内联样式：绑定到对象</p>
    <p v-bind:style="[bassStyles, overrdingStyles]">内联样式：绑定到数组</p>
    <P v-bind:style="{transform: rotate7deg}">内联样式：自动添加前缀</P>
    <p v-bind:style="{display:['-webkit-box','ms-flexbox','flex']}">内联样式：多重值</p>
  </section>
</template>

<script>
export default {
  name: "StyleBinding",
  data() {
    return {
      activeColor: "red",
      fontSize: 30,
      styleObject: {
        color: "red",
        fontSize: "13px"
      },
      bassStyles: { color: "lightgray" },
      overrdingStyles: { fontSize: "12px" },
      rotate7deg: "rotate(7deg)"
    };
  }
};
</script>